<template>
  <div id="result-dev">
    <el-tabs
        v-model="resultTabSelected"
        value="record"
    >
      <el-tab-pane
          label="记录"
          name="record"
          style="max-height:400px"
      >
        <div
            v-for=" (r,i) in records"
            :key="i"
            class="record-div"
        >
          <div class="record-title">[执行SQL{{ i + 1 }}] <span
              v-if="r.success"
              style="color:green"
          >成功</span>
            <span
                v-else
                style="color:red"
            >失败</span>
          </div>
          <div>{{ r.sql }}</div>
          <div
              v-if="!r.success"
              style="color:red"
          >{{ r.message }}
          </div>
          <div>
            耗时:{{ r.cost }}ms
            <span v-if="r.success">
              数量:{{ r.size }}
            </span>
          </div>
        </div>

        <div v-if="records.length==0">无记录</div>
      </el-tab-pane>
      <el-tab-pane
          v-for=" (r,i) in results"
          :key="i"
          :name="'record'+(i+1)"
      >
        <span
            slot="label"
            :style="r.success?'color:green':'color:red'"
        >
          结果{{ i + 1 }}
        </span>
        <el-table
            v-if="r.success"
            v-loading="loading"
            :data="r.dataList"
            border
            header-cell-class-name="data-table-header"
            size="mini"
            stripe
            style="width: 100%"
        >
          <el-table-column
              v-for="(c,i) in r.columnList"
              :key="i"
              :label="c.columnName"
              show-overflow-tooltip
          >
            <template slot-scope="scope">
              {{ scope.row[i] }}
            </template>
          </el-table-column>

        </el-table>

        <el-pagination
            v-if="r.total>0"
            :current-page.sync="r.pageNo"
            :page-size.sync="r.pageSize"
            :total="r.total"
            background
            layout="->, prev, pager, next, sizes, total"
            @size-change="pageChange(r)"
            @current-change="pageChange(r)"
        >
        </el-pagination>
        <div
            v-else
            style="color:red"
        >{{ r.message }}
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import {execQueryApi} from "@/api/database";

export default {
  data() {
    return {
      loading: false,
      records: [],
      results: [],
      resultTabSelected: "record",
    };
  },
  methods: {
    async pageChange(page) {
      console.log(page);
      this.loading = true;
      let r = await execQueryApi(
          page.instanceId,
          page.sql,
          page.pageNo,
          page.pageSize
      );
      page.dataList = r.dataList;
      page.pageNo = r.pageNo;
      page.pageSize = r.pageSize;
      page.total = r.total;
      this.loading = false;
    },
  },
};
</script>
<style scoped>
#result-dev {
  margin-top: 10px;
}

#result-dev .el-tab-pane {
  overflow: auto;
}

#result-dev .record-div {
  font-size: 12px;
  margin-bottom: 10px;
}

#result-dev .record-div .record-title {
  font-weight: bold;
}

#result-dev /deep/ .data-table-header {
  font-weight: bold;
  color: #000000;
  background-color: #dcdfe6;
}

#result-dev .el-pagination {
  margin-top: 10px;
}
</style>
    